<template>
	<view class="container">
		<view class="item">
			<view class="item_top">
                 <view class="item_top_title">预约工长</view>
				 <view class="item_top_status">已取消</view>
			</view>
			<view class="item_bottom">
                <view class="item_bottom_area">
					四川省成都市青羊区
				</view>
				<view class="item_bottom_bottom">
					<view class="item_bottom_bottom_time">2023-11-18 16:38:08</view>
					<view class="item_bottom_bottom_btn">
						<button class="cu-btn round btn">确认预约</button>
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="item_top">
		         <view class="item_top_title">预约工长</view>
				 <view class="item_top_status">已取消</view>
			</view>
			<view class="item_bottom">
		        <view class="item_bottom_area">
					四川省成都市青羊区
				</view>
				<view class="item_bottom_bottom">
					<view class="item_bottom_bottom_time">2023-11-18 16:38:08</view>
					<view class="item_bottom_bottom_btn">
						<button class="cu-btn round btn">确认预约</button>
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="item_top">
		         <view class="item_top_title">预约工长</view>
				 <view class="item_top_status">已取消</view>
			</view>
			<view class="item_bottom">
		        <view class="item_bottom_area">
					四川省成都市青羊区
				</view>
				<view class="item_bottom_bottom">
					<view class="item_bottom_bottom_time">2023-11-18 16:38:08</view>
					<view class="item_bottom_bottom_btn">
						<button class="cu-btn round btn">确认预约</button>
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="item_top">
		         <view class="item_top_title">预约工长</view>
				 <view class="item_top_status">已取消</view>
			</view>
			<view class="item_bottom">
		        <view class="item_bottom_area">
					四川省成都市青羊区
				</view>
				<view class="item_bottom_bottom">
					<view class="item_bottom_bottom_time">2023-11-18 16:38:08</view>
					<view class="item_bottom_bottom_btn">
						<button class="cu-btn round btn">确认预约</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.container {
		background:#FAFAFA;
		padding: 1% 3%;
	}
	.item {
		width: 100%;
		height: 260upx;
		/* border: 1px solid black; */
		border-radius: 10px;
		background: #FFFFFF;
		margin-top: 8px;
		display: flex;
		flex-direction: column;
		padding: 20upx;
	}
	.item_top {
		width: 100%;
		height: 75upx;
		border-bottom:1px solid #F5F5F5;;
		display: flex;
		flex-direction: row;
		line-height: 75upx;
	}
	.item_top_title{
		width: 80%;
		font-family: Source Han Sans;
		font-size: 16px;
		font-weight: 500;
		letter-spacing: 0em;
		font-feature-settings: "kern" on;
		color: #333333;
	}
	.item_top_status {
		padding-left: 40rpx;
		text-align: right;
		font-family: Source Han Sans;
		font-size: 13px;
		letter-spacing: 0em;
		font-feature-settings: "kern" on;
		color: #808080;
	}
	.item_bottom {
		display: flex;
		flex-direction: column;
	}
	.item_bottom_bottom {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 75upx;
		line-height: 75upx;
	}
	.item_bottom_area {
		margin-top: 30upx;
		font-family: Source Han Sans;
		font-size: 14px;
		letter-spacing: 0em;
		
		font-feature-settings: "kern" on;
		color: #4D4D4D;
		
		z-index: 0;
	}
	.item_bottom_bottom_time {
		width: 80%;
		font-family: Source Han Sans;
		font-size: 13px;
		font-weight: normal;
		letter-spacing: 0em;
		font-feature-settings: "kern" on;
		color: #B2B2B2;
		z-index: 1;
	}
	.btn {
		width: 175upx;
		height: 55upx;
		font-family: Source Han Sans;
		font-size: 12px;
		line-height: normal;
		letter-spacing: 0em;
		font-feature-settings: "kern" on;
		color: #FFFFFF;
		background: #FFAA00;
		z-index: 0;
	}
</style>